<template>
    <div class="counsel">
        <Header :show="true">参会咨询</Header>
        <div class="content">
            <ul>
                <li>
                    <div class="left"><span class="bg1"><i class="fa fa-building-o"></i></span></div>
                    <div class="right">
                        <p class="tit">联系地址</p>
                        <p class="text" v-for="item in arrList.counsel">{{item.site}}</p>
                    </div>
                </li>
                <li>
                    <div class="left"><span class="bg2"><i class="fa fa-envelope"></i></span></div>
                    <div class="right">
                        <p class="tit">联系邮箱</p>
                        <p class="text" v-for="item in arrList.counsel">{{item.email}}</p>
                    </div>
                </li>
                <li>
                    <div class="left"><span class="bg3"><i class="fa fa-volume-control-phone" aria-hidden="true"></i></span></div>
                    <div class="right">
                        <p class="tit">联系电话</p>
                        <p class="text" v-for="item in arrList.counsel">{{item.phone}}</p>
                    </div>
                </li>
                <li class="person">
                    <div class="left"><span class="bg4"><i class="fa fa-users"></i></span></div>
                    <div class="right">
                        <p class="tit">联系人</p>
                        <p class="text" v-for="item in arrList.counsel">{{item.person}}</p>
                    </div>
                </li>
                <li class="online">
                    <div class="twoCode"><img src="../../assets/twoCode.png" alt=""></div>
                    <p>在线咨询</p>
                </li>
            </ul>
       	</div>
    </div>
</template>

<script>
import Header from '../base/Header'
    export default {
        data() {
            return {
                arrList:{},
                i:0
            }
        },
        components:{
            Header
        },
        mounted(){
            var id = this.$route.params.id;
            this.fetchData(id);
        },
        methods: {
            fetchData(id) {
                let _this = this;
                this.$http.get('static/data/invite.data')
                .then(function(res){
                    _this.arrList = res.data[id].content;
                    _this.i = id;
                }).catch(function(err){
                    console.log(err);
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .counsel{
    	position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 110;
        background: #f4f4f4;
		.content{
			padding: 56px 10px 0;
            background: #f4f4f4;
            font-size: 0.3rem;
            ul{
                li{
                    margin: 2px 0;
                    padding: 0.1rem 0;
                    overflow: hidden;
                    background: #fff;
                    border-radius: 3px;
                    .left{
                        float: left;
                        width: 20%;
                        text-align: center;
                        span{
                            margin-top: 0.1rem;
                            display: inline-block;
                            width: 0.8rem;
                            height: 0.8rem;
                            border-radius: 50%;
                            text-align: center;
                            i{font-size: 0.4rem;color: #fff;height: 0.8rem;line-height: 0.8rem;}
                        }
                        .bg1{background: #ff6100;}
                        .bg2{background: #66abf0;}
                        .bg3{background: #f5be47;}
                        .bg4{background: #c6514b;}
                    }
                    .right{
                        float: left;
                        width: 80%;
                        .tit{
                            font-size: 0.3rem;
                            line-height: 0.6rem;
                            color: #333;
                        }
                        .text{
                            line-height: 0.5rem;
                            color: #555;
                            font-size: 0.26rem;
                        }
                    }
                }
                .person{margin-top: 0.3rem;}
                .online{
                    margin-top: 0.3rem;
                    padding: 0.2rem 0 0;
                    background: #f4f4f4;
                    .twoCode{
                        width: 3rem;
                        height: 3rem;
                        margin: 0 auto; 
                        img{width: 100%;height: 100%;}
                    }
                    p{text-align: center;line-height: 0.6rem;font-size: 0.26rem;color: #555;}
                }
            }
		}
    }
</style>